<template>
    <div>
    <van-nav-bar :title="'我的图片:'+resDir" left-text="返回" left-arrow  right-text="上传"
                 @click-left="$router.back()"
    />
    <van-row >
        <van-col span="8" v-for="(item,index) in imgs">
            <div class="img_box"
                 :style="{backgroundSize:'cover',backgroundImage:'url(http://pqusfpdyj.bkt.clouddn.com/'+item.path+')'}"
                 @click="showHD(imgs,index)"
            ></div>
            <van-row  class="operation">
                <van-col span="8">
                    <van-icon name="close" size=100 />
                </van-col>
                <van-col span="8">
                    <van-icon name="edit" size=100 />
                </van-col>
                <van-col span="8">
                        <van-icon :name="imgIds.indexOf(item.id)>=0 ? 'add': 'add-o'" size=100
                                  @click="selectImg(item.id)"/>
                </van-col>

            </van-row>
        </van-col>
    </van-row>
    </div>
</template>

<script>

    import storeUtil from '../../utils/storeUtil'
    import ltxService from '../../services/LtxService'
    import { ImagePreview } from 'vant';
    export default {
        computed:{
            ...storeUtil.makeFields("imgIds")
        },
        props:["resDir"],
        mounted(){
            console.log(this.$route.params)
            ltxService.getUserRes(this.resDir).then((resp)=>{
                this.imgs=resp.data.data
            })
        },
        methods:{
            selectImg(id)
            {
                let index=this.imgIds.indexOf(id);
                if(index>=0 )
                {
                    this.imgIds.splice(index,1)
                }
                else this.imgIds.push(id)
            },
            showHD(imgs,index){
                let imgUrls=[]
                for(let i=0;i<imgs.length;i++)imgUrls.push(['http://pqusfpdyj.bkt.clouddn.com/'+imgs[i].path])
                ImagePreview({images:imgUrls,startPosition:index})
            }

        },
        name: "ImgList",
        data(){
            return{
                checked:false,
                imgs:[]
            }
        }

    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/base";
    .van-col{
        margin-bottom: 10px;
        .img_box{
            border: 2px solid #eeeeee;
            height: 125px;background-color: #8d8e90;
        }
        .operation{
            color: $sub;
            font-size: 16px;
            text-align: center;
            padding: 5px;
        }
    }
</style>